<template>
  <div class="goods-chat">
    <div class="chat-top">
      <!-- 关闭 -->
      <van-nav-bar>
        <template #left>
          <van-icon name="cross" size="20" @click="cancel"/>
        </template>
      </van-nav-bar>
     <!-- 商品详情 -->
      <div class="goods-grid">
        <div class="goods-info">
          <div class="jingxuan">
            <img class="recommend-item-img" :src="domain + showImg" alt="" />
          </div>
          <div class="goods-title text-ellipsis-2">{{ goodsInfo.name }}</div>
          <div class="user-info mt5">
            <span>O tempo de expiração de promoção na página inicial：{{ format(goodsInfo.mainLimit )}}</span>
          </div>
          <div class="user-info mt5">
            <span>Prazo para recomendação de produtos em destaque：{{ format(goodsInfo.recommendLimit ) }}</span>
          </div>
          <div class="user-info mt5">
            <span>Topo：{{ goodsInfo.topCount }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-bottom">
      <van-collapse v-model="activeNames">
        <van-collapse-item v-for="(item,index) in list2" :key="index" :title="item.productName" :name="index">
          <van-row gutter="20">
            <van-col span="12"><div class="bottom-detail">Count：<span style="color:#fb8c24">{{ item.num }}</span></div></van-col>
            <van-col span="12"><div class="bottom-detail">Total：<span style="color:#fb8c24">{{ item.totalPrice | num2Money }} KZ</span></div></van-col>
          </van-row>
           <van-row gutter="20">
            <van-col span="12"><div class="bottom-detail">Type：{{ item.type }}</div></van-col>
            <van-col span="12"><div class="bottom-detail">Unit：{{item.unit}}</div></van-col>
          </van-row>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import Api from "@/api";
import { Domain } from "@/constants";
export default {
  name: 'Chat',
  props:{
    id:{
      type:String,
      default:""
    },
  },
  data() {
    return {
      domain: Domain,
      detail: {},
      showImg: '',
      goodsInfo:{},
      list2:[],
      activeNames: []
    };
  },
  watch:{
    id:{
      deep:true,
      immediate:true,
      handler(val){
        if(val !== ""){
          this.loadDetail(val)
        }
        
      }
    }
  },
  created() {},
  methods:{
    NumberFormat(num) {
      num = num.toString();
      return num[1] ? num : '0' + num;
    },
     // 转换时间格式
    format(time){
      if (time){
        var date = new Date(time);
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var date1=date.getDate();
        var h = this.NumberFormat(date.getHours());
        var mm = this.NumberFormat(date.getMinutes());
        var s = this.NumberFormat(date.getSeconds());
        return year+"-"+month+"-"+date1+"  "+h+": "+mm+": "+s;
      }else {
        return ""
      }
    },
    cancel(){
      this.$emit('cancel',false)
    },
    loadDetail(id) {
      Api.payOrderDetail(id).then((res) => {
        console.log(res)
        this.detail = res;
        this.goodsInfo = JSON.parse(this.detail.goodsInfo)
        this.list2 = JSON.parse(this.detail.content)
        // 默认全部展开
        this.activeNames = []
        this.list2.forEach((item,index)=>{
          this.activeNames.push(index)
        })
        this.showImg = this.goodsInfo.imgList.length > 0 ?JSON.parse(this.goodsInfo.imgList)[0] : '';
      });
    },
  }
};
</script>
<style scoped lang="scss">
.goods-chat{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: #f2f2f2;
}
::v-deep.van-nav-bar{
  background-color: #fff;
  padding: 10px;
  .van-nav-bar__left{
    padding-left: 0;
  }
}
.chat-bottom{
  flex: 1;
  overflow: auto;
  margin-top: 10px;
  color: #666;
  .bottom-detail{
    color: #666;
  }
}
.chat-top{
   .goods-grid {
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    .goods-image-out{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30%;
      height: calc(30vw - 18px);
    }
    .goods-image {
      width: 90%;
      height: 80%;
      position: relative;
      background-color: #999;
      border-radius: 4px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        
      }
      .tag {
        position: absolute;
        left: 0;
        bottom: 0;
        background: #fb8c24;
        color: #fff;
        font-size: 14px;
        padding: 3px 5px;
      }
    }
    .goods-info {
      padding: 8px;
      box-sizing: border-box;
      .jingxuan {
        position: relative;
        width: 100%;
        border-radius: 4px;
        height: 180px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .goods-title {
        color: #595959;
        font-size: 14px;
        height: 20px;
        
        margin-top: 5px;
      }
      .goods-price {
        color: #333;
        font-size: 14px;
        
      }
      .user-info {
        font-size: 12px;
        font-weight: 400;
        color: #666;
        display: flex;
        flex-direction: column;
        line-height: 21px;
      }
    }
  }
}


</style>
